<template>
	<view class="app-user-agent-info" :style="[AppSkinVar]">
		<view class="app-user-agent-info__header fixed-top bg-white">
			<view class="e-p-20">
				<view class="bg-gradient-primary e-flex c-white e-radius-20 text-center" style="height: 216rpx">
					<view class="e-flex-2 e-rela people">
						<view class="e-font-48 fw-600 e-m-b-6">{{info.storeAll||0}}</view>
						<view class="e-font-26">商家数量</view>
					</view>
					<view class="e-flex-2 e-rela">
						<view class="e-font-48 fw-600 e-m-b-6">{{info.rewardAll||0}}</view>
						<view class="e-font-26">奖励金额</view>
					</view>
				</view>
			</view>
			<e-tabs
				:current="tabIndex"
				:list="[{ name: '招商店铺' }, { name: '奖励明细' }]"
				:scrollable="false"
				:lineColor="AppSkin.primary"
				itemStyle="height:100rpx"
				@change="handleChange"
			></e-tabs>
		</view>
		<view class="e-p-l-20 e-p-r-20">
			<view class="e-p-l-20 e-p-r-20 e-p-t-30 e-p-b-30 e-flex e-flex-between e-m-b-20 bg-white e-radius-20" v-for="item in list" :key="item.id">
				<text class="e-font-30 fw-500">{{ item.agentLevelName }}</text>
				<view class="e-flex">
					<text class="e-font-30 c-secondary e-p-r-10">{{ item.agentAddress }}</text>
					<e-icon name="arrow-right" color="#999" size="36rpx"></e-icon>
				</view>
			</view>
		</view>
		<view class="e-p-l-20 e-p-r-20" v-show="tabIndex === 0">
			<view class="app-user-agent-info__search e-p-20 bg-f6f7fb">
				<view class="app-user-agent-info__search-box e-flex e-p-l-20 e-p-r-20">
					<view class="iconfont icon-sousuo e-m-r-20" style="color: #b3b3b3"></view>
					<input v-model="keywrod" border="none" :placeholder="$t('请输入店铺名称或ID搜索')" @confirm="handleStoreRefresh()" />
				</view>
			</view>
			<view class="app-user-agent-info__search-view"></view>
			<view class="bg-white e-m-b-20 e-radius-20 e-p-l-20 e-p-r-20 e-p-t-30 e-p-b-30 e-flex e-flex-items-start" v-for="item in storeList" :key="item.id">
				<load-image size="84rpx" :src="info.logo" shape="circle"></load-image>
				<view class="e-flex-1 e-m-l-20">
					<view class="e-m-b-10 e-flex e-flex-between">
						<text class="fw-500">{{ item.name }}</text>
						<text class="e-font-24 c-secondary">营业中</text>
					</view>
					<view class="c-333 e-font-24 e-m-b-10">ID：{{ item.id }}</view>
					<view class="c-333 e-font-24 e-m-b-10">
						<text>{{ $t('attractInvest.总流水金额') }}：</text>
						<text class="c-red">{{ item.payAll }}</text>
					</view>
					<view>
						<text class="e-font-24 c-secondary">{{ $timeFormat(item.createTime, 'yyyy-mm-dd hh:MM:ss') }}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="e-p-t-20 e-p-l-20 e-p-r-20" v-show="tabIndex === 1">
			<view class="bg-white e-m-b-20 e-radius-20 e-p-l-20 e-p-r-20 e-p-t-30 e-p-b-30 e-flex" v-for="item in infoList" :key="item.id">
				<view class="e-flex-1 e-m-r-20">
					<view class="e-m-b-6">
						<text>{{item.storeName}}</text>
					</view>
					<view>
						<text class="e-font-26 c-secondary">{{ $timeFormat(item.createTime, 'yyyy-mm-dd hh:MM:ss') }}</text>
					</view>
				</view>
				<text class="e-font-32 fw-500 white-nowrap">+{{item.cost}}</text>
			</view>
		</view>
		<empty v-if="isEmpty"></empty>
		<load-more v-else :showLoad="showLoad"></load-more>
	</view>
</template>

<script setup>
import { ref, computed } from 'vue';
import { getAgentRewardCount, getAgentStoreList, getAgentRewardList } from '@/common/request/api';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import { useCurrentInstance, useQueryPage } from '@/common/hooks';

const props = defineProps({
	id: String
});

const info = ref({});

const tabIndex = ref(0);
const handleChange = (e) => {
	tabIndex.value = e.index;
};

const keywrod = ref('');
const rerequestParams = computed(() =>{
	return {
		name:keywrod.value
	}
})
const {
	showLoad: storeShowLoad,
	isEmpty: storeEmptyShow,
	list: storeList,
	handleQueryPage: handleStoreQueryPage,
	handleRefresh: handleStoreRefresh
} = useQueryPage({
	api: getAgentStoreList,
	option: {
		params:rerequestParams,
		responseKey: 'data.rows',
		totalKey: 'data.total'
	}
});
const {
	showLoad: infoShowLoad,
	isEmpty: infoEmptyShow,
	list: infoList,
	handleQueryPage: handleInfoQueryPage,
	handleRefresh: handleInfoRefresh
} = useQueryPage({
	api: getAgentRewardList,
	option: {
		responseKey: 'data.rows',
		totalKey: 'data.total'
	}
});
const isEmpty = computed(() => {
	return tabIndex.value === 0 ? storeEmptyShow.value : infoEmptyShow.value;
});
const showLoad = computed(() => {
	return tabIndex.value === 0 ? storeShowLoad.value : infoShowLoad.value;
});

onReachBottom(() => {
	tabIndex.value === 0 ? handleStoreQueryPage() : handleInfoQueryPage();
});

onLoad(() => {
	getAgentRewardCount({ id: props.id }).then((res) => {
		info.value = res.data;
	});
	handleStoreRefresh();
	handleInfoRefresh();
});
</script>

<style lang="scss" scoped>
@include appBem_b(user-agent-info) {
	padding-top: 376rpx;
	@include appBem_e(header) {
		height: 376rpx;
	}
	@include appBem_e(search) {
		position: fixed;
		top:376rpx;
		left:0;
		right:0;
		height: 120rpx;
		z-index:999;
		&-box {
			height: 80rpx;
			background: #ffffff;
			border-radius: 40rpx;
		}
	}
	@include appBem_e(search-view) {
		height: 120rpx;
	}
	.people {
		&::after {
			content: '';
			position: absolute;
			width: 2rpx;
			height: 72rpx;
			right: 0;
			top: calc(50% - 36rpx);
			background: #ffffff;
			opacity: 0.2;
		}
	}
}
</style>
